<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import Son from './Son.vue'

// 1. 父自己数据
const name = ref('Voldy')

// 2. 接收子组件扔过来的状态
const sonIsLarge = ref(false)

// 3. 计算属性：把父名字 + 子状态 拼成一句话
const tips = computed(() => {
  return `${name.value} 看到子组件现在是${sonIsLarge.value ? '大' : '小'}号`
})

// 4. 事件回调
function handleSizeChange(val: boolean) {
  sonIsLarge.value = val
}

watch(name, (newVal, oldVal) => {
  console.log(`[watch] 父组件名字从 "${oldVal}" 改成 "${newVal}"`)
})

</script>

<template>
  <div id="father">
    <div>{{ tips }}</div>          <!-- 这里用到了计算属性 -->
    <button @click="name = 'Lord'">父改名→Lord</button>
    <button @click="name = 'Voldy'">父改名→Voldy</button>
  </div>

  <!-- 这里实现父传子 -->

  <!-- 5. 监听子组件的 size-change 事件 -->
  <Son message="Hello World" @size-change="handleSizeChange" />
</template>

<style scoped>
#father {
  width: 300px;
  background: #073f2d;
  color: #fff;
  padding: 12px;
  margin-bottom: 12px;
}
</style>